<template>
  <div>
    <fks-dialog
      :visible="true"
      :append-to-body="true"
      @close="close"
      width="960px"
      top="8vh"
      ref="dialog"
      v-cloak
    >
      <!-- 弹窗标题（icon + 文字） -->
      <template slot="title">
        <!-- 表单新增 -->
        <i class="fks-icon-plus" v-if="type === 'add'"></i>
        <!-- 表单执行\编辑 -->
        <i
          class="fks-icon-edit"
          v-if="type === 'execute' || type === 'edit'"
        ></i>
        <!-- 表单查看 -->
        <i class="fks-icon-view" v-if="type === 'view'"></i>
        <span>
          {{ formName + (taskNodeName ? `-${taskNodeName}` : '') }}
          <!-- 工作包名-节点名称-审批 -->
          <!-- {{ type !== 'add' ? (formName + (taskNodeName ? `-${taskNodeName}` : '')) : formName }} -->
        </span>
      </template>
      <fks-tabs
        v-model="activeName"
        class="work-pakage-node"
        @tab-remove="removeTab"
      >
        <fks-tab-pane :label="formName" name="first">
          <Form
            @success="success"
            @setFormName="setFormName"
            @setTaskNodeName="setTaskNodeName"
          />
        </fks-tab-pane>
        <fks-tab-pane label="相关资源" name="second">
          <field-resource
            @viewForm="viewForm"
            :wpName.sync="wpName"
            :processInstanceId="processInstanceId"
          ></field-resource>
        </fks-tab-pane>
        <fks-tab-pane
          closable
          lazy
          v-for="item in formListOpen"
          :name="item.bizId"
          :label="item.moduleName"
          :key="item.bizId"
        >
          <tabForm
            :process-instance-id="item.processInstanceId"
            :bizId="item.bizId"
            :formKey="item.formKey"
          ></tabForm>
        </fks-tab-pane>
      </fks-tabs>
      <!-- 流程按钮 -->
      <div
        v-if="activeName == 'first'"
        style="display: flex; align-items: center; flex-direction: row-reverse"
        slot="footer"
      >
        <FlowButton></FlowButton>
      </div>
    </fks-dialog>
  </div>
</template>

<script>
import Mix from '@/mixins/module'
import emmiter from 'fawkes-lib/lib/mixins/emitter'
import FlowButton from '@/modules/FormCenter/componentsWp/FlowButton/flowButton'
import Form from '@/modules/FormCenter/componentsWp/Form/index.vue'
import tabForm from '@/modules/FormCenter/componentsWp/TabForm/tabForm.vue'
import fieldResource from '@/modules/FormCenter/componentsWp/FieldResource/index.vue'
export default {
  //自由流程表单 组件
  name: 'WpForm',
  components: { FlowButton, Form, tabForm, fieldResource },
  mixins: [Mix, emmiter],
  provide() {
    return {
      parentComponent: this
    }
  },
  data() {
    return {
      formName: '',
      taskNodeName: '',
      type: this.$route.params.type,
      processInstanceId:
        this.$route.params.processInstanceId ||
        this.$route.query.processInstanceId ||
        '', // 流程实例ID,
      activeName: 'first',
      wpName: '',
      formListOpen: []
    }
  },
  methods: {
    // 添加标签
    viewForm(item) {
      let findFlag = this.formListOpen.some((ele) => {
        return item.bizId === ele.bizId
      })
      //如果在打开的表单中找到了就直接打开，不添加菜单
      if (findFlag) {
        this.activeName = item.bizId
      } else {
        let data = {
          ...item,
          isResource: true
        }
        this.formListOpen.push(data)
        this.activeName = item.bizId
      }
    },
    // 移除tab
    removeTab(bizId) {
      this.activeName = 'first'
      this.formListOpen = this.formListOpen.filter(
        (item) => item.bizId !== bizId
      )
    },
    //表单弹窗 关闭
    close() {
      this.$router.replace(this.$route.fullPath.match(/(\S*)\/wpForm/)[1])
    },
    success() {
      this.close()
      this.$emit('success')
    },
    setFormName(val) {
      this.formName = val
    },
    setTaskNodeName(val) {
      this.taskNodeName = val
    }
  },
  mounted() {
    // this.initial()
  }
}
</script>
<style lang="scss" scoped>
::v-deep .no-flow-chart {
  *[aria-controls*='pane-flow'] {
    display: none;
  }
}
[v-cloak]:not(body) {
  display: none;
}
.fawkes-custom-diagram-button {
  text-align: center;
}

.work-pakage-node {
  ::v-deep .fks-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
</style>
